<template>
	<view class="container">
		<view class="header">
			<text class="title"><text style="margin-left: 20rpx;">我的病史</text></text>
		</view>

		<!-- 病史列表 -->
		<view class="history-list">
			<view class="history-item" v-for="(item, index) in historyList" :key="index">
				<view class="">
					<view class="disease">{{ item.descs }}</view>
					<view class="date">{{ item.medical_time }}</view>
				</view>
				<text class="delete" @click="deleteHistoryList(index)">删除</text>
			</view>
		</view>

		<!-- 新增按钮 -->
		<view class="add-btn" @click="showPopup">
			<view style="width: 50rpx;height: 50rpx;font-size: 40rpx;
			line-height: 50rpx; border-radius: 50rpx;background-color: #01bf14;color: #fff;">+</view>
			<view style="margin-left: 20rpx;font-size: 38rpx;">新增病史数据</view>
		</view>

		<!-- 添加病史的弹窗 -->
		<uni-popup ref="popup" type="dialog" v-if="show">
			<uni-popup-dialog mode="base" title="新增病史数据" :before-close="true" @confirm="confirmDialog">
				<view class="dialog-content">
					<view class="form-item">
						<input class="input" v-model="newDisease" placeholder="请输入病史描述" />
					</view>
					<view class="form-item">
						<picker mode="date" :value="newDate" @change="dateChange">
							<view class="picker">{{ newDate || '请选择日期' }}</view>
						</picker>
					</view>
					<view class="buttons" @click="addHistoryList"><button>添加</button></view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 响应式数据
	const historyList = ref([]);
	const getHistoryList = () => {
		uni.request({
			url: 'http://localhost:3010/user/medical_history',
			method: 'GET',
			header: {
				Authorization: `Bearer ${uni.getStorageSync("token")}`,
			},
			success: (res) => {
				if (res.data.code === 200) {
					historyList.value = res.data.data
				}
			}
		})
	}
	const newDisease = ref('');
	const newDate = ref('2000-12-04');
	const addHistoryList = () => {
	if (!newDisease.value.trim()) {
		uni.showToast({
			title: '请输入病史描述',
			icon: 'error'
		});
		return;
	}
	uni.request({
		url: 'http://localhost:3010/user/add_medical_history',
		method: 'POST',
		header: {
			'Content-Type': 'application/x-www-form-urlencoded',
			Authorization: `Bearer ${uni.getStorageSync("token")}`,
		},
		data: {
			descs: newDisease.value,
			medical_time: newDate.value
		},
		success: (res) => {
			if (res.data.code === 200) {
				show.value = false;
				newDisease.value = '';
				newDate.value = '2000-12-04';
				getHistoryList();
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: '添加失败：' + res.data.msg,
					icon: 'none'
				});
			}
		},
		fail: (err) => {
			console.error('请求失败：', err);
			uni.showToast({
				title: '网络错误，添加失败',
				icon: 'none'
			});
		}
	});
}
	// 删除
	const deleteHistoryList = (id, index) => {
		uni.request({
			url: 'http://localhost:3010/user/del_medical_history',
			method: 'POST',
			header: {
				Authorization: `Bearer ${uni.getStorageSync("token")}`,
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {
				mid: id
			},
			// 3. 接口请求成功处理
			success: (res) => {
				if (res.data.code === 200) {
					// 3.1 接口返回成功：从前端列表中移除该记录
					historyList.value.splice(index, 1);
					// 3.2 提示用户删除成功
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
				} else {
					// 3.3 接口返回失败（如ID不存在）
					uni.showToast({
						title: '删除失败：' + (res.data.msg || '未知错误'),
						icon: 'none'
					});
				}
			},
			// 4. 接口请求失败处理（如网络错误）
			fail: (err) => {
				console.error('删除请求失败：', err);
				uni.showToast({
					title: '网络错误，删除失败',
					icon: 'none'
				});
			}
		})
	}
	onMounted(() => {
		getHistoryList()
		addHistoryList()
		deleteHistoryList()
	})
	const showAddDialog = ref(false);

	// 方法
	const dateChange = (e) => {
		newDate.value = e.detail.value;
	};

	const show = ref(false)
	const showPopup = () => {
		show.value = true
	}
	const showcha = () => {
		show.value = false
	}
</script>
<style>
	.container {
		padding: 20px;
		background-color: #fff;
		min-height: 100vh;
	}

	.header {
		margin-bottom: 20px;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		border-left: 10rpx solid #00ff06;
	}

	.history-list {
		margin-bottom: 20px;
	}

	.history-item {
		border: 1rpx solid #00ff06;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.disease {
		font-size: 16px;
		color: #333;
		flex: 2;
	}

	.date {
		font-size: 14px;
		color: #666;
		flex: 1;
		text-align: center;
	}

	.delete {
		font-size: 14px;
		color: #f56c6c;
		flex: 1;
		text-align: right;
	}

	.add-btn {
		width: 300rpx;
		/* background-color: #007aff; */
		margin: auto;
		color: #01bf14;
		display: flex;
		font-weight: bold;
		padding: 12px;
		border-radius: 8px;
		text-align: center;
		margin-top: 20px;
	}

	.dialog-content {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 25px;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 190, 0, 0.5);
	}

	.form-item {
		margin-bottom: 15px;
	}

	.input {
		border-bottom: 1px solid #68ff71;
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 10px;
	}

	.picker {
		/* border: 1px solid #eee; */
		padding: 10px;
		border-radius: 4px;
		margin-top: 20rpx;
		color: #858585;
		font-size: 36rpx;
	}

	.buttons {
		width: 85%;
		height: 90rpx;
		background-color: #00cb0d;
		border-radius: 20rpx;
		margin: auto;
	}

	.buttons button {
		width: 100%;
		height: 90rpx;
		background-color: #00cb0d;
		border-radius: 20rpx;
		color: #fff;
		font-size: 38rpx;
	}
</style>